@extends('layouts.header')
@section('content')
    <div class="page-container">
        <div class="cl pd-5 bg-1 bk-gray form">
            <a class="btn btn-primary radius r" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
            <form class="form form-horizontal" >
                <div class="row cl">
                    <label class="form-label col-sm-2"> 数据状态： </label>
                    <div class="formControls col-sm-7">
                        <label class="ml-10"><input type="radio" name="dj" value="2" checked> 全部 </label>
                        <label class="ml-10"><input type="radio" name="dj" value="1"> 未受理 </label>
                        <label class="ml-10"><input type="radio" name="dj" value="0"> 已受理 </label>
                    </div>
                </div>
            </form>
            <form class="form form-horizontal" id="form">
                @if(count($thirds) > 1)
                <div class="row cl">
                    <label class="form-label col-xs-2">平台：</label>
                    <div class="formControls col-xs-7">
                        <select name="third_id" class="select2 input-text" >
                            <option value="" >--请选择--</option>
                            @foreach($thirds as $third)
                                <option value="{{$third->id}}" >{{$third->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                @endif
                @foreach($orgTree as $third_id_name => $orgTreeItem)
                    @php list($third_id,$third_name) = explode('-',$third_id_name); @endphp
                    <div class="row cl orgs">
                        <label class="form-label col-sm-2"> {{$third_name}}送检单位： </label>
                        <div class="formControls col-sm-7">
                            <div class="mt-5">
                                <select class="select2 input-text" onchange="changeOrgId(this,{{$third_id}})">
                                    <option value="">--请选择--</option>
                                    @foreach($orgTreeItem as $item)
                                        <option value="{{$item['value']}}">{{$item['label']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="row cl">
                    <label class="form-label col-xs-2">送检日期：</label>
                    <div class="formControls col-xs-7">
                        <input type="date" name="send_time1" value="{{old('send_time1')}}"  class="input-text Wdate" style="width:200px;">
                         - 
                         <input type="date" name="send_time2" value="{{old('send_time2')}}"  class="input-text Wdate" style="width:200px;">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2">RFID/自编号：</label>
                    <div class="formControls col-xs-7">
                        <input type="text" name="third_id2" value="{{old('third_id2')}}"  class="input-text" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2">试验条码：</label>
                    <div class="formControls col-xs-7">
                        <input type="text" name="bar_code" value="{{old('bar_code')}}"  class="input-text" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2">批次号：</label>
                    <div class="formControls col-xs-7">
                        <input type="text" name="batchNum" value="{{old('batchNum')}}"  class="input-text" />
                    </div>
                </div>
                <input type="hidden" name="third_org_id" value=''>
                <div class="row cl">
                    <b class="btn btn-primary radius ml-15" id="download_report">下载报告</b>
                    <b class="btn btn-primary radius col-xs-offset-2" id="search"> 搜索 </b>
                    <button class="btn btn-primary radius ml-15" id="reset">重置</button>
                </div>
            </form>
        </div>
        
        <div class="mt-10">

            <table class="table table-border table-bordered table-hover table-bg table-responsive table-condensed" id="datatable">
                <thead>
                <tr class="text-c">
                    <th><input type="checkbox" id="checkAll"></th>
                    <th class="hidden">tool_id</th>
                    <th class="hidden">std_id</th>
                    <th class="third_id hidden">third_id</th>
                    <th class="third_org_id hidden">送检单位ID</th>
                    <th class="third_name" @if(count($thirds) < 2) hidden @endif >数据来源平台</th>
                    <th class="third_org_name" style="width:100px;">送检单位</th>
                    <th class="tool_name">样品名称</th>
                    <th>平台样品名称</th>
                    <th>额定电压</th>
                    <th>分类</th>
                    <th>检验标准</th>
                    <th>本系统检验项目</th>
                    <th>拉取检验项目</th>
                    <th>RFID/自编号</th>
                    <th>生产厂家</th>
                    <th>规格型号</th>
                    <th>生产日期</th>
                    <th class="send_time">送检日期</th>
                    <th class="ctime">拉取日期</th>
                    <th>试验条码</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        var table,nextOrgs;
        $(function(){
            $.fn.dataTable.ext.errMode = 'throw';//datatable抛异常的方式，在console中输出，默认以alert的方式弹出
            table = $('#datatable').DataTable({
                pageLength: 10,
                // "deferRender": true,//延迟渲染速度
                ordering:false,
                serverSide: true,
                searching:false,
                processing:true,
                ajax: {
                    url: "{{url()->full()}}", 
                    data: function (d) {
                        // console.log(d);
                        d.draw = 1;
                        d.dj = $('input:radio[name=dj]:checked').val();
                        let pageinfo = table.page.info();
                        d.page = pageinfo.page;
                        d.length = pageinfo.length;
                        d._token_2 = Date.now();
                        d._token = '{{csrf_token()}}';
                        d.form = $('#form').serializeArray();
                    },
                    type : "post"
                },
                processing : true,//加载数据时候是否显示进度条
                language: { url: '/admin/lib/datatables/dataTables_Chinese_Lang.json' },
                columns: [
                    { data : null, class:"", render:function(data, type, row, meta) {
                        return '<input type="checkbox" value="'+row.id+'">';
                    },searchable:false}, 
                    { data : "tool_id", class:"tool_id hidden" }, 
                    { data : "std_id", class:"std_id hidden" }, 
                    { data : "third_id", class:"third_id hidden" }, 
                    { data : "third_org_id", class:"third_org_id text-c hidden" }, 
                    { data : "third_name", class:"third_name text-c @if(count($thirds) < 2) hidden @endif" }, 
                    { data : "third_org_name", class:"third_org_name text-c" }, 
                    { data : "tool_name", class:"tool_name text-c" }, 
                    { data : "third_tool_name", class:"third_tool_name text-c" }, 
                    { data : "voltage", class:"voltage text-c" }, 
                    { data : "class", class:"class text-c" }, 
                    { data : "std_num", class:"std_num text-c" }, 
                    { data : "item_names", class:"item_names text-c" }, 
                    { data : "third_item_names", class:"third_item_names text-c" }, 
                    { data : "third_id2", class:"third_id2 text-c" }, 
                    { data : "manufacturer", class:"manufacturer text-c" }, 
                    { data : "guige_xinghao", class:"guige_xinghao text-c" }, 
                    { data : "production_date", class:"production_date text-c" }, 
                    { data : "send_time", class:"send_time"}, 
                    { data : "ctime", class:"ctime text-c", render:function(data, type, row, meta) {
                        try{
                           return row.ctime.substring(0,10);
                        }catch(err){}
                        return '';
                    },searchable:false},
                    { data : "bar_code", class:"bar_code text-c" },
                    { data : null, class:"text-c" , render:function(data, type, row, meta) {
                        return '<a class="btn btn-primary radius size-MINI" onclick="upload(\''+row.bar_code+'\')">上传</a> <a class="btn btn-primary radius size-MINI" href="?id='+row.id+'&action=download_report">下载报告</a>';
                    },searchable:false},
                ],
            });
            $('.scan').focus();
            // $('span:first','#tool_names').trigger('click'); //测试用
            // $('#checkAll').trigger('click'); //测试用
            // $('#edit_class').trigger('click'); //测试用
            // $('#gaiyao_add').trigger('click'); //测试用
        })

        function upload(bar_code,action=''){
            ajax('post','upload',{'bar_code':bar_code})
        }

        $('#download_report').on('click',function(){
            let ids = getDataIds();
            for(let i in ids){
                let id = ids[i];
                window.open("?id="+id+"&action=download_report","third_data_all"+id);
            }
        })

        // $('input,select','form').on("change",function() {
        //     // console.log($(this).val());
        //     table.ajax.reload();
        // })
        $('#search').on('click',function () {
            table.ajax.reload();
        })

        //select切换组织机构,数据之间是平行关系
        function changeOrgId(obj,third_id) {
            /*删除下面的下面兄弟元素 start*/
                let divRowIndex = $(obj).closest('div').index();
                $(obj).closest('div.formControls').find('div').each(function (index) {
                    if(index > divRowIndex){
                        $(this).remove();
                    }
                })
            /*删除下面的下面兄弟元素 end*/
            let orgId = $(obj).val();
            $('input[name=third_org_id]').val(orgId).trigger('change');
            if(orgId == ''){ //如果是请选择，触发上一级
                let parentSele = $(obj).closest('div').prev('div').find('select');
                if (parentSele.val()) {
                    parentSele.trigger('change'); //不是最顶级，触发上一级改变
                }else{
                    $(obj).closest('div').siblings('div').remove(); //如果是最顶级，删除所有兄弟元素
                }
                return false;
            }
            
            let res = getNextOrg(orgId,third_id);
            if(res.length > 0){
                let content = '<div class="mt-5">'+
                        '<select class="select2 input-text" onchange="changeOrgId(this,'+third_id+')">'+
                            '<option value="">--请选择--</option>';
                            for(let i in res){
                                content += '<option value="'+res[i]['value']+'">'+res[i]['label']+'</option>';
                            }
                        content += '</select>'+
                    '</div>';
                $(obj).closest('div.formControls').append(content);
            }        
            
        }

        //根据id获取下级组织机构
        const getNextOrg = (orgId,third_id)=>{
            ajax('get','getOrgTree',{third_id:third_id,orgId:orgId},function (res) {
                nextOrgs = res;
            },0,0);
            return nextOrgs;
        }

        $('#reset').on('click',function () {
            location.reload();
        })
        
    </script>

@endsection

